<template>
	<!-- 头部内容 -->
	<view class="head">
		<!-- 占位 -->
		<view v-if="toTop" :style="{'height': headHeight + 'px'}"></view>
		<view class="headBox" :style="{'height': headHeight + 'px','background-color':bgColor}">
			<!-- 状态栏 -->
			<view class="state" :style="{'height': statusHeight + 'px'}"></view>
			<!-- 导航栏 -->
			<view class="nav" :style="{'height': navHeight + 'px'}">
				<!-- 返回按钮 -->
				<view v-if="backColor" class="backBg" :class="[isBackBg ? 'fixedBgColor' : '']"
					:style="{'width': 88 + 'rpx','height': 88 + 'rpx'}" @click="toUrl">
					<view class="backBtn" :style="{'border-color': backColor}"></view>
				</view>
				<view v-else class="leftTitle">
					{{leftTitle}}
				</view>
				<!-- 自定义标题 -->
				<view class="title" :style="{'color': titleColor}">
					{{titleText}}
				</view>
				<!--  -->
				<view class="fl-handle">

					<view style="margin-left:20rpx;margin-right:20rpx;display: block;">
						<image src="/static/images/index/search.png" mode="" style="width: 40rpx;height: 40rpx;"
							@click="toUrls('/subPages/search/search')"></image>
						<!-- 	<text class="iconfont icon-sousuo" style="margin-right: 20rpx;"
							></text> -->
					</view>

					<view class="cart" @click="toUrls('/pages/cart/cart')">
						<view class="number" v-if="number">{{number}}</view>
						<img src="/static/images/index/cart.png" alt="" style="width: 40rpx;height: 40rpx;">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "NavbarHead",
		data() {
			return {
				// 头部整体高度
				headHeight: '',
				//状态栏高度
				statusHeight: '',
				//导航栏高度
				navHeight: '',
				// 胶囊高度
				ellipse: '',
				// 返回按钮背景色
				isBackBg: false,
			};
		},
		props: {
			number: null,
			// 返回按钮颜色 eg:#fff  默认黑色
			backColor: String,
			// 指定返回路径 默认返回上一页
			url: String,
			// 背景颜色 默认白色
			bgColor: String,
			// 标题
			titleText: String,
			leftTitle: String,
			// 标题颜色 默认白色
			titleColor: {
				default: '#fff',
				type: String
			},
			// 内容是否置顶 默认为false
			toTop: {
				default: false,
				type: Boolean
			},
			rightMethod: {}, // 点击文本需执行函数
			rightcolor: String, //文本颜色
		},
		// 组件生命周期
		mounted() {


			// 设备信息
			let detail = uni.getSystemSetting()
			// 获取设备的系统
			let system = detail.system
			//获取状态栏高度
			this.statusHeight = detail.statusBarHeight
			// 胶囊信息
			let ellipse = uni.getMenuButtonBoundingClientRect()
			// 获取胶囊高度
			this.ellipse = ellipse.height - 2
			// 获取胶囊距顶部距离
			let absTop = ellipse.top
			// 计算导航栏高度 = (胶囊距顶部距离 - 状态栏高度) * 2 + 胶囊高度
			this.navHeight = (absTop - this.statusHeight) * 2 + this.ellipse + 2
			// 计算整体高度
			let cheack = /iOS/
			// 判断设备型号
			this.isIOS = cheack.test(system);
			if (this.isIOS) {
				// iOS
				this.headHeight = this.statusHeight + this.navHeight + 2
			} else {
				//Android
				this.headHeight = this.statusHeight + this.navHeight
			}
			uni.setStorageSync('headHeight', this.headHeight) // px
		},
		methods: {
			// 返回按钮
			toUrl() {
				if (this.url) { // 自定义返回路径
					uni.reLaunch({
						url: this.url
					})
				} else { // 默认返回
					uni.navigateBack({
						delta: 1
					})
				}
			},
			toUrls(item) {
				uni.navigateTo({
					url: item
				})
			},
			// // 返回按钮触摸开始
			// backStart(e) {
			// 	this.isIOS || (this.isBackBg = true)
			// },
			// // 返回按钮触摸结束
			// backEnd(e) {
			// 	(this.isBackBg = false)
			// },
		},
	}
</script>


<style lang="scss">
	.cart {
		// margin-left: 210rpx;
		position: relative;

		.number {
			position: absolute;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			left: 100%;
			text-align: center;
			background-color: red;
			font-size: 16rpx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	.head {
		position: relative;
		z-index: 9999 !important;
	}

	.headBox,
	.state,
	.nav {
		width: 100%;
	}

	/* 自定义头部 */
	.headBox {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		transition: background-color .5s;
	}

	/* 状态栏 */
	.state {
		position: relative;
	}

	/* 导航栏 */
	.nav {
		position: relative;
	}

	/* 返回按钮背景 */
	.backBg {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 返回按钮 */
	.backBtn {
		content: "";
		display: inline-block;
		height: 12px;
		width: 12px;
		border-width: 0 0 1.4px 1.4px;
		border-style: solid;
		transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
		-webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
	}

	.fixedBgColor {
		background-color: #ccc;
	}

	/* 自定义头部标题 */
	.title {
		font-size: 32rpx;
		/* font-weight: 600; */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 360rpx;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.leftTitle {
		font-size: 46rpx;
		/* font-weight: 600; */
		position: absolute;
		top: 50%;
		left: 24rpx;
		transform: translate(0, -50%);
		max-width: 360rpx;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.toLogin {
		position: absolute;
		top: 50%;
		/* left: 50%; */
		right: 12px;
		transform: translate(0, -50%);
		font-size: 14px;
	}

	.search {
		margin-left: 32rpx;
		width: 478rpx;
		height: 64rpx;
		border-radius: 38rpx;
		border: 2rpx solid rgba(240, 242, 245, 1);
		background: rgba(255, 255, 255, 1);
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.search>text {
		color: rgba(21, 31, 56, 0.4);
		font-size: 26rpx;
		margin: 0 0 0 8rpx;
	}

	.fl-handle {
		display: flex;
		padding-left: 20rpx;
		padding-top: 20rpx;
		position: absolute;
		left: 100rpx;
	}
</style>